<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1、引入依赖 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <div id="app"></div>

  <!-- 2、编写react代码 -->
  <script type="text/babel">

    /**
     * jsx是React.createElement(component,props, ...children)函数的语法糖
     * 所有的jsx最终都会被转换成React.createElement的函数调用
    */

    const message1 = <h2>hello react</h2>

    /**
     * jsx -> babel ->React.createElement
     * createElement需要传递三个参数
     * 参数一：type   
     *  当前ReactElement的类型；如果是标签元素，就使用字符串表示“div”；如果是组件元素，那么就直接使用组件的名称。
     * 参数二：config
     *  所有jsx中的属性都在config中以对象的属性和值的形式存储
     * 参数三：chilren
     *  存放在标签中的内容，以children数组的方式进行存储；如果是多个元素，React内部有对其进行处理。
    */
    const message2 = React.createElement('h2', null, 'hello react')

    ReactDOM.render(message1, document.getElementById('app')) 
  </script>
</body>
</html> 